<template>
  <el-card class="box-card">
    <template #header>
      <div class="an-title">库存告急</div>
    </template>
    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      style="width: 100%;"
      height="500px"
      tooltip-effect="dark"
    >
      <el-table-column label="缩略图" width="100">
        <template #default="scope">
          <el-image style="width: 60px; height: 60px" :src="scope.row.image" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" show-overflow-tooltip>
        <template #default="scope">
          <el-button type="text" @click="clickInfo(scope.row)">{{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
    </el-table>
  </el-card>

  <goods-info v-if="isVisible" v-model:isVisible="isVisible" :id="goodsID"></goods-info>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import goodsInfo from "@/components/GoodsInfo/index.vue";
import { Goods, GoodsType } from "@/utils/interface";

@Options({
  components: { goodsInfo },
})
export default class stockList extends Vue {
  [x: string]: any;
  loading: Boolean = false;
  list: Array<GoodsType> = [];
  isVisible: Boolean = false;
  tableOk: Boolean = false;
  goodsID: Number = 0;

  mounted() {
    this.getList();
  }

  // 查看
  clickInfo(item: Goods) {
    this.goodsID = item.id;
    this.isVisible = true;
  }

  getList() {
    let nd = {
      page: 1,
      pageSize: 10,
      sortIndex: 4,
    };
    this.loading = true;
    this.API.goodsList(nd).then((res: any) => {
      this.loading = false;
      this.list = res.records;
    });
  }
}
</script>
